<template>
  <div class="afterInvestDel-page app-container">
    <div class="head">
      <div class="chunk title">
        <div class="product">
          <h3>{{info.groupName}}</h3>
          <p class="tips">
            <!-- <span class="tip">价值型</span> -->
          </p>
        </div>
        <div style="font-size: 13px;" class="info">
          <div style="padding-left: 30%;">
            <div class="fromLine">
              <div class="label">投资金额：</div>
              <div class="fromLine-content">{{info.investManageVo.investMoney}} 万元</div>
            </div>
            <div class="fromLine">
              <div class="label">备注：</div>
              <div class="fromLine-content">{{info.mark}}</div>
            </div>
            <!-- <div class="fromLine">
              <div class="label">投资时间：</div>
              <div class="fromLine-content">{{info.investTime | parseTime}}</div>
            </div> -->
          </div>
        </div>
        <div style="font-size: 13px;" class="info2">
          <div style="padding-left: 30%;">
            <!-- <div class="fromLine">
              <div class="label">对标指数：</div>
              <div class="fromLine-content">{{contrastOptions_obj[info.investIndex]}}</div>
            </div> -->
          </div>
        </div>
      </div>
      <div class="chunk data">
        <div class="netWorth">
          <div class="netWorth1">
            <p class="num">{{info.investManageVo.latestNetWorth}}</p>
            <p class="unit">单位净值（{{info.investManageVo.latestNetWorthTime | parseTime}}）</p>
          </div>
          <div class="netWorth2">
            <div class="fromLine">
              <div class="label">累计净值：</div>
              <!-- <div class="fromLine-content"><span style="color: #F00;">*</span> 0.8833</div> -->
              <div class="fromLine-content">{{info.investManageVo.latestNetWorth}}</div>
            </div>
            <div class="fromLine">
              <div class="label">复权净值： </div>
              <div class="fromLine-content">{{info.investManageVo.latestNetWorth}}</div>
            </div>
          </div>
        </div>
        <div class="profit">
          <div>收益率</div>
          <div>
            <span v-if="info.investManageVo.investNetWorthExtends" :class="info.investManageVo.investNetWorthExtends[2].incomeRate>0?'positiveFc':'negativeFc'">{{info.investManageVo.investNetWorthExtends[2].incomeRate | toFixed2}}%</span>
            <span v-if="info.investManageVo.investNetWorthExtends" :class="info.investManageVo.investNetWorthExtends[0].incomeRate>0?'positiveFc':'negativeFc'">{{info.investManageVo.investNetWorthExtends[0].incomeRate | toFixed2}}%</span>
            <span v-if="info.investManageVo.investNetWorthExtends" :class="info.investManageVo.investNetWorthExtends[5].incomeRate>0?'positiveFc':'negativeFc'">{{info.investManageVo.investNetWorthExtends[5].incomeRate | toFixed2}}%</span>
          </div>
          <div>
            <span>近3月</span>
            <span>今年以来</span>
            <span>近1年</span>
          </div>
        </div>
        <div class="history">
          <div>成立以来</div>
          <div>
            <span v-if="info.investManageVo.investNetWorthExtends" style="font-size: 16px">{{info.investManageVo.investNetWorthExtends[7].maxDownRate | toFixed2}}%</span>
            <span v-if="info.investManageVo.investNetWorthExtends" style="font-size: 16px">{{info.investManageVo.investNetWorthExtends[7].sharpeRate | toFixed2}}</span>
          </div>
          <div> 
            <span>最大回撤</span>
            <span>夏普比率</span>
          </div>
        </div>
        <div class="other">
          <div style="width: 50%;">
            <div class="fromLine">
              <div class="label">成立日期：</div>
              <div class="fromLine-content">{{info.investManageVo.investTime | parseTime}}</div>
            </div>
            <div class="fromLine">
              <div class="label"></div>
              <div class="fromLine-content"></div>
            </div>
          </div>
          <div style="width: 50%;"></div>
        </div>
      </div>
      <div class="chunk operation from-alignCenter">
          <el-form ref="dataFrom" :inline="true" label-width="82px" :model="dataFrom">
            <el-form-item label="对比指标：" prop="types">
              <indexSelectTree v-model="dataFrom.types" @contrastOptionsObj="contrastOptionsObj"></indexSelectTree>
            </el-form-item>
            <el-form-item style="margin-left: 20px">
              <el-button type="primary" @click="saveParamsHandle">应用</el-button>
              <el-button @click="refresh">重置</el-button>
            </el-form-item>
          </el-form>
      </div>

      <!-- 悬浮头部 -->
      <div v-show="scrollCard" class="scrollCard from-alignCenter">
        <el-form ref="dataFrom" :inline="true" label-width="82px" :model="dataFrom">
          <el-form-item label="对比指标：" prop="types">
            <indexSelectTree v-model="dataFrom.types" @contrastOptionsObj="contrastOptionsObj"></indexSelectTree>
          </el-form-item>
          <el-form-item style="margin-left: 20px">
            <el-button type="primary" @click="saveParamsHandle">保存应用</el-button>
            <el-button @click="refresh">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="content">

      <div class="column">
        <span>历史走势图</span>
        <i class="el-icon el-icon-d-arrow-right" :class="{'openChunk': showChunk1}" @click="showChunk1=!showChunk1" />
      </div>
      <div v-show="showChunk1" class="showChunk">
        <Chart1 v-if="groupId&&Object.keys(contrastOptions_obj).length&&dataFrom.types.length&&info.groupName" :contrastOptions_obj="contrastOptions_obj" id="chart1" :userId="userId" :ids="groupId" :id_index="dataFrom.types"
        :name1="info.groupName" :name2="info.groupName" typePage="afterManageCom" :height="280" width="100%" />
        <div v-else style="height:400px;"></div>
      </div>

      <div class="column">
        <span>收益风险指标</span>
        <i class="el-icon el-icon-d-arrow-right" :class="{'openChunk': showChunk2}" @click="showChunk2=!showChunk2" />
      </div>
      <div v-show="showChunk2" class="showChunk">
        <el-table
          v-loading="listLoading_riskIndicators"
          :data="list_riskIndicators"
          fit size="mini"
          style="width: 100%;margin-top:20px"
          :cell-style="{padding: '8px 0'}"
          :cell-class-name="tableRowClassName"
          :header-cell-style="{background:'#dcedff',color:'#32639d'}"
        >
          <el-table-column type="index" width="200" :index="titleHandle"></el-table-column>
          <el-table-column :prop="key" :label="add_column_list[key]" v-for="(item, key) in list_riskIndicators[0]" :key="key" align="center"></el-table-column>
        </el-table>
      </div>

      <div class="column">
        <span>历史净值</span>
        <i class="el-icon el-icon-d-arrow-right" :class="{'openChunk': showChunk3}" @click="showChunk3=!showChunk3" />
      </div>
      <div v-show="showChunk3" class="showChunk">
        <el-table
          v-loading="listLoading_netWorth"
          :data="list_netWorth"
          stripe fit
          size="mini"
          :cell-style="{padding: '8px 0'}"
          :header-cell-style="{background:'#dcedff',color:'#32639d'}"
          style="width: 100%;margin-top:20px"
        >
          <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
          <el-table-column prop="investName" label="投资名称" align="center" min-width="180" show-overflow-tooltip></el-table-column>
          <el-table-column prop="tradeDate" label="净值日期" align="center" min-width="100"></el-table-column>
          <el-table-column prop="currentEquity" label="单位净值" align="center" min-width="100"></el-table-column>
          <el-table-column prop="currentEquity" label="累计净值" align="center" min-width="100"></el-table-column>
          <el-table-column prop="currentEquity" label="复权累计净值" align="center" min-width="100"></el-table-column>
        </el-table>
        <pagination v-if="total_netWorth>0" style="padding-bottom: 0;" :total="total_netWorth" :page.sync="listQuery.pageCurrent" :limit.sync="listQuery.limit" @pagination="investGroupHistory" />
      </div>

      <div class="column">
        <span>历史月度表现</span>
        <i class="el-icon el-icon-d-arrow-right" :class="{'openChunk': showChunk4}" @click="showChunk4=!showChunk4" />
      </div>
      <div v-show="showChunk4" class="showChunk">
        <div class="line" style="margin-top: 20px;">
          <div class="showMonth">
            <div class="round round1"></div>
            {{ info.groupName }}
          </div>
          <div class="showMonth">
            <div class="round round2"></div>
            <el-select style="width: 130px;" v-model="month_contrast" size="mini" placeholder="请选择" @change="monthContrastHandle">
              <el-option
                v-for="item in one_contrastOptions_list"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
        <el-table
          v-loading="listLoading_netWorth"
          :data="list_showMonth"
          stripe fit
          size="mini"
          :cell-class-name="showMonthTableClassName"
          :cell-style="{padding: '8px 0'}"
          :header-cell-style="{background:'#dcedff',color:'#32639d'}"
          style="width: 100%;margin-top:20px"
        >
          <el-table-column prop="0.year" label="年份" width="100" align="center"></el-table-column>
          <el-table-column :prop="`${i-1+''}`" :label="`${i}月`" align="center" v-for="i in 12" :key="i">
            <template slot-scope="scope">
              <span v-if="scope.row[i-1].growthRate!=null" :class="scope.row[i-1].growthRate>=0?'positiveFc':'negativeFc'">
                {{scope.row[i-1].growthRate}}%
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="12.growthRate" label="YTD" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row[12].growthRate!=null" :class="scope.row[12].growthRate>=0?'positiveFc':'negativeFc'">
                {{scope.row[12].growthRate}}%
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="line" style="margin-top: 20px;">
          <el-button-group>
            <el-button size="small" :type="monthChartBtn?'':'primary'" @click="monthChartBtn=0">月度回报</el-button>
            <el-button size="small" :type="monthChartBtn?'primary':''" @click="monthChartBtn=1">收益分布</el-button>
          </el-button-group>
        </div>
        <div class="month-chartContent">
          <div class="mChunk">
            <showmonth-chart v-if="info.groupName&&monthChartBtn" id="showmonthChart" :name_contrast="name_contrast" :month_contrast="month_contrast" :y-name="info.groupName" :data="list_monthNetWorthLine" height="350px" width="100%" />
            <month-return-chart v-else-if="info.groupName&&(!monthChartBtn)" id="monthReturnChart" :name_contrast="name_contrast" :month_contrast="month_contrast" :y-name="info.groupName" :data="list_monthNetWorthDistributed" :height="400" width="100%" />
          </div>
          <div class="mChunk">
            <el-table
              v-if="info.groupName&&monthChartBtn"
              v-loading="findNetWorthExtendByStrategyId2_loading"
              :data="list_showMonth_profit"
              stripe fit
              size="mini"
              :cell-style="{padding: '6px 0'}"
              :header-cell-style="{background:'#dcedff',color:'#32639d'}"
              style="width: 100%;margin-top:20px"
              :key="list_showMonth_key"
            >
              <el-table-column prop="" label="" align="center">
                <template slot-scope="scope">
                  <span>{{list_showMonth_profit_column1[scope.$index].name}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="1" :label="info.groupName" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.incomeRate" :class="scope.row.incomeRate>0?'positiveFc':'negativeFc'">{{ scope.row.incomeRate }}%</span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column prop="2" :label="name_contrast" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.growth" :class="scope.row.growth>0?'positiveFc':'negativeFc'">{{ scope.row.growth }}%</span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
            </el-table>
            <el-table
              v-show="info.groupName&&(!monthChartBtn)"
              v-loading="getMonthNetWorthDetial_loading"
              :data="list_table_getMonthNetWorthDetial"
              stripe fit
              size="mini"
              :cell-style="{padding: '6px 0'}"
              :header-cell-style="{background:'#dcedff',color:'#32639d'}"
              style="width: 100%;margin-top:20px"
            >
              <el-table-column prop="tradeDateStr" label="净值日期" align="center"></el-table-column>
              <el-table-column prop="latestNetWorth" label="单位净值" align="center"></el-table-column>
              <el-table-column prop="latestNetWorth" label="累计净值" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.latestNetWorth"><span style="color:#F00;">*</span>{{ scope.row.latestNetWorth }}</span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column prop="growthRate" label="月涨跌幅" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.growthRate&&scope.row.growthRate!=0" :class="scope.row.growthRate>0?'positiveFc':'negativeFc'">{{ scope.row.growthRate }}%</span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
            </el-table>
            <pagination v-show="monthNetWorthDetial_total>0&&info.groupName&&(!monthChartBtn)" style="padding-bottom: 0;" 
              :total="monthNetWorthDetial_total" 
              :page.sync="monthNetWorthDetial_listQuery.pageCurrent" 
              :limit.sync="monthNetWorthDetial_listQuery.limit" @pagination="getMonthNetWorthDetial" 
            />
          </div>
        </div>
      </div>

    </div>

  <div style="height:200px;"></div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getGroupByGroupId, investGroupRisk, investGroupHistory, groupMonthlyIncrease, groupBySegment, groupDetail, groupHistogram, getGroupNetWorthMonthDistributed } from '@/api/afterManageCom'
import { getIndexRiskByIndexTypeAndTime, getMonthlyIndex, findTimeScopeGrowth } from '@/api/policyManage'
import indexSelectTree from '@/components/investComn/indexSelectTree.vue'
import showmonthChart from '@/components/Charts/lineEcharts_netWorthShowMonth.vue'
import monthReturnChart from '@/components/Charts/barEcharts_monthReturn.vue'
import Chart1 from '@/components/Charts/afterInvest/chart3.vue'
import Pagination from '@/components/Pagination'
import { parseTime, deepClone } from '@/utils'

export default {
  name: 'StrategyCombDetails',
  components: { indexSelectTree, Chart1, Pagination, showmonthChart, monthReturnChart },
  data() {
    return {
      active: 1,
      listLoading1: false,
      list1: [],

      chart_date: [],
      dataFrom: {
        types: []
      },
      groupId: '',
      info: {
        investManageVo: {}
      },
      start_date: '',

      scrollCard: false,

      showChunk1: true,

      showChunk2: true,
      listLoading_riskIndicators: false,
      list_riskIndicators: [], // 收益风险指标
      _list_riskIndicators: [], // 保存基础 收益风险指标
      riskIndicators_columnLabel: {
        'annualizedIncomeRate': '年化收益',
        'annualFluctuationsRate': '年化波动',
        'sharpeRate': '夏普比率',
        'maximumDrawdownRate': '最大回撤',
        'calmarRate': '卡玛比率',
        'maxBackIncomDay': '最大回补天数'
      },
      add_column_list: [],

      showChunk3: true,
      listLoading_netWorth: false,
      listQuery: {
        pageCurrent: 1,
        limit: 10
      },
      list_netWorth: [], //历史净值
      total_netWorth: 0,

      showChunk4: true,
      one_contrastOptions_list: [],
      contrastOptions_obj: {},
      listLoading_monthNetWorth: false,
      month_contrast: undefined,
      name_contrast: '',
      list_showMonth: [],
      _list_showMonth: [],
      monthChartBtn: 0,
      list_showMonth_profit: [],
      list_showMonth_key: 0,
      list_showMonth_profit_column1: [
        { id: 99, name: '成立以来' },
        { id: 0, name: '今年以来' },
        { id: 1, name: '近1月' },
        { id: 3, name: '近3月' },
        { id: 6, name: '近6月' },
        { id: 12, name: '近1年' },
        { id: 24, name: '近2年' },
        { id: 36, name: '近3年' },
      ],
      list_monthNetWorthLine: [], // 收益分布
      findNetWorthExtendByStrategyId2_loading: false, // 收益分布 列表loading
      list_monthNetWorthDistributed: [], // 月度回报 echart
      list_table_getMonthNetWorthDetial: [], // 月度回报 列表
      getMonthNetWorthDetial_loading: false, // 月度回报 列表loading
      monthNetWorthDetial_listQuery: { // 月度回报 分页
        pageCurrent: 1,
        limit: 10
      },
      monthNetWorthDetial_total: 0,

    }
  },
  computed: {
    ...mapGetters(['userId']),
  },
  watch: {
    'dataFrom.types': {
      handler(newVal, oldVal) {
        if(newVal.length > 4) {
          this.$message({
            message: '最多选择4个对比指标',
            type: 'warning',
            duration: 2000
          })
          this.$nextTick(() => {
            this.dataFrom.types = oldVal
          })
        }
        if(Object.keys(this.contrastOptions_obj).length) {
          this.one_contrastOptions_list = []
          newVal.forEach(item => {
            this.one_contrastOptions_list.push({
              id: item,
              name: this.contrastOptions_obj[item]
            })
          })
          this.month_contrast = newVal[0]
          if(this.chart_date.length&&newVal.toString()!=oldVal.toString()) {
            this.monthContrastHandle(newVal[0])
          }
        }
      },
      deep: true
    },
    month_contrast(val) {
      if(val) {
        this.name_contrast = this.contrastOptions_obj[val] // 月度表现头部修改
      }
    }
  },
  created() {
    this.groupId = this.$route.query.id
    this.investGroupHistory(this.groupId)
    this.getMonthNetWorth(this.groupId)
    this.findNetWorthExtendByStrategyId2(this.groupId)
    this.getMonthNetWorthLine(this.groupId)
    this.getMonthNetWorthDistributed(this.groupId)
    this.getMonthNetWorthDetial(this.groupId)

    window.addEventListener('scroll', this.watchScroll)
  },
  methods: {
    watchScroll() {
      if(document.documentElement.scrollTop >= 318) {
        this.scrollCard = true
      }else {
        this.scrollCard = false
      }
    },
    contrastOptionsObj(obj) {
      this.contrastOptions_obj = obj
      this.getGroupByGroupId(this.groupId)
    },
    saveParamsHandle() {
      this.getIndexRiskByIndexTypeAndTime(this.dataFrom.types)
    },
    refresh() {
      this.$refs['dataFrom'].resetFields()
    },
    getGroupByGroupId(groupId) {
      this.listLoading1 = true
      getGroupByGroupId({
        groupId,
        userId: this.userId
      }).then(res => {
        this.listLoading1 = false
        console.log('详情  getInvestHeadDetial', res)
        this.info = res.body
        this.dataFrom.types = [res.body.groupIndex]
        this.month_contrast = this.dataFrom.types[0]
        this.chart_date[0] = parseTime(res.body.startTime)
        this.chart_date[1] = res.body.endTime ? parseTime(res.body.endTime) : parseTime(new Date())
        this.dataFrom.types.forEach(item => {
          this.one_contrastOptions_list.push({
            id: item,
            name: this.contrastOptions_obj[item]
          })
        })

        this.getriskIndicators()
        this.monthContrastHandle(this.month_contrast)
      })
    },
    showMonthTableClassName({ rowIndex, columnIndex }) {
      if(columnIndex === 0 && rowIndex%2 === 0) {
        return 'showMonthyearBorder0'
      }else if(columnIndex === 0 && rowIndex%2 !== 0) {
        return 'showMonthyearBorder1'
      }
    },
    tableRowClassName({ columnIndex }) {
      if (columnIndex === 0) {
        return 'title-row'
      } else if (columnIndex === 1) {
        return 'cell-row-0'
      } else if (columnIndex === 2) {
        return 'cell-row-1'
      } else if (columnIndex === 3) {
        return 'cell-row-2'
      } else if (columnIndex === 4) {
        return 'cell-row-3'
      } else if (columnIndex === 5) {
        return 'cell-row-4'
      } else if (columnIndex === 6) {
        return 'cell-row-5'
      } else if (columnIndex === 7) {
        return 'cell-row-6'
      }
      return ''
    },
    titleHandle(i) {
      const key_list = Object.keys(this.riskIndicators_columnLabel)
      return this.riskIndicators_columnLabel[key_list[i]]
    },
    // 收益风险指标
    getriskIndicators() {
      this.listLoading_riskIndicators = true
      investGroupRisk({
        groupId: this.groupId,
        userId: this.userId
      }).then(res => {
        console.log('风险指标', res)
        this.add_column_list.push(this.info.groupName)
        Object.keys(this.riskIndicators_columnLabel).forEach((key, i) => {
          const val = res.body[key]
          this.list_riskIndicators[i] = {}
          this.list_riskIndicators[i]['0'] = val
        })
        this._list_riskIndicators = deepClone(this.list_riskIndicators)
        this.getIndexRiskByIndexTypeAndTime(this.dataFrom.types)
      })
    },
    // 收益风险指标 指数
    getIndexRiskByIndexTypeAndTime(indexType) {
      console.log('收益风险指标 指数', this.chart_date)
      getIndexRiskByIndexTypeAndTime({
        indexType,
        startTime: this.chart_date[0],
        endTime: this.chart_date[1],
      }).then(res => {
        console.log('收益风险指标 对比', res)
        this.listLoading_riskIndicators = false
        const key_list = ['annualizedIncomeRate', 'annualFluctuationsRate', 'sharpeRate', 'maximumDrawdownRate', 'calmarRate', 'maxBackIncomDay']
        const obj = res.body
        this.add_column_list = this.add_column_list.slice(0, 1)
        this.list_riskIndicators = deepClone(this._list_riskIndicators)
        Object.keys(obj).forEach(key => {
          const element = obj[key]
          const header = this.contrastOptions_obj[key]
          this.list_riskIndicators.forEach((item, i) => {
            const index = Object.keys(item).length
            if(index!==0) {
              item[index] = element[key_list[i]]
            }else {
              item[1] = element[key_list[i]]
            }
          })
          this.add_column_list.push(header)
        })
      })
    },
    // 历史净值
    investGroupHistory() {
      this.listLoading_netWorth = true
      investGroupHistory({
        groupId: this.groupId,
        ...this.listQuery,
        userId: this.userId
      }).then(res => {
        this.listLoading_netWorth = false
        console.log('历史净值', res)
        this.list_netWorth = res.body.list
        this.total_netWorth = res.body.total
      })
    },
    // 历史月度表现
    getMonthNetWorth(groupId) {
      this.listLoading_monthNetWorth = true
      groupMonthlyIncrease({
        groupId,
        userId: this.userId
      }).then(res => {
        this.listLoading_monthNetWorth = false
        const list = Object.keys(res.body).map(function(i) { return res.body[i] })
        const new_list = deepClone(list)
        console.log('历史月度表现', list)
        list.forEach((items, index) => {
          if(items.length<13) {
            new_list[index] = []
            const year = items[0].year
            for(let i=0; i<13; i++) {
              if(items[i]&&items[i].month != i+1) {
                if(!new_list[index][i]) {
                  new_list[index][i] = {
                    year: items[i].year
                  }
                }
                new_list[index][items[i].month-1] = deepClone(items[i])
              }else if(!new_list[index][i]) {
                if(items[i]&&items[i].month == i+1) {
                  new_list[index][items[i].month-1] = deepClone(items[i])
                }else {
                  new_list[index][i] = {
                    year
                  }
                }
              }
            }
          }
        })
        this.list_showMonth = new_list
        this._list_showMonth = deepClone(new_list)
        console.log('历史月度表现 修改........', this.list_showMonth)
      })
    },
    // 指数月度表现
    monthContrastHandle(indexType) {
      getMonthlyIndex({
        indexType,
        startTime: this.chart_date[0],
        endTime: this.chart_date[1]
      }).then(res => {
        console.log('指数月度表现', res)
        Object.keys(res.body).forEach(key => {
          const items = res.body[key]
          items.forEach(item => {
            if(item.indexTime) {
              item.month = Number(item.indexTime.slice(5))
            }else {
              item.month = 13
            }
            item.growthRate = item.indexGrowthRate==null ? null : Number(item.indexGrowthRate)
          })
        })
        const list = Object.keys(res.body).map(function(i) { return res.body[i] })
        const new_list = deepClone(list)
        list.forEach((items, index) => {
          if(items.length<13) {
            new_list[index] = []
            const year = items[0].year
            for(let i=0; i<13; i++) {
              if(items[i]&&items[i].month != i+1) {
                if(!new_list[index][i]) {
                  new_list[index][i] = {
                    year: items[i].year
                  }
                }
                new_list[index][items[i].month-1] = deepClone(items[i])
              }else if(!new_list[index][i]) {
                if(items[i]&&items[i].month == i+1) {
                  new_list[index][items[i].month-1] = deepClone(items[i])
                }else {
                  new_list[index][i] = {
                    year
                  }
                }
              }
            }
          }
        })
        this.list_showMonth = deepClone(this._list_showMonth)
        new_list.forEach(element => {
          this.list_showMonth.forEach((item, i) => {
            if(element[0].year == item[0].year) {
              this.list_showMonth.splice(i+1, 0, element)
            }
          })
        })
      })
      if(this.month_contrast) {
        this.findTimeScopeGrowth(this.month_contrast)
      }
    },
    // 收益分布 列表
    findNetWorthExtendByStrategyId2(groupId) {
      this.findNetWorthExtendByStrategyId2_loading = true
      groupBySegment({
        groupId,
        userId: this.userId
      }).then(res => {
        console.log('收益分布 列表', res)
        this.headTail(res.body)
        this.list_showMonth_profit = res.body
        // setTimeout(() => {
        //   console.error('findTimeScopeGrowth2');
        //   this.findTimeScopeGrowth(this.month_contrast)
        // }, 100)
      })
    },
    // 收益分布 列表 指数
    findTimeScopeGrowth(indexType) {
      findTimeScopeGrowth({
        indexType,
        startTime: this.chart_date[0],
        endTime: this.chart_date[1],
      }).then(res => {
        console.log('对比指数 收益分布 列表', res)
        this.headTail(res.body)
        this.findNetWorthExtendByStrategyId2_loading = false
        this.list_showMonth_profit.forEach((item, i) => {
          item.growth = res.body[i].growth
        })
        this.list_showMonth_key++
      })
    },
    headTail(list) {
      list.unshift(list[list.length-1])
      list.splice(list.length-1, 1)
    },
    // 收益分布 柱状图
    getMonthNetWorthLine(groupId) {
      groupHistogram({
        groupId,
        userId: this.userId
      }).then(res => {
        console.log('收益分布', res)
        this.list_monthNetWorthLine = res.body
      })
    },
    // 月度回报
    getMonthNetWorthDistributed(groupId) {
      getGroupNetWorthMonthDistributed({
        groupId,
        userId: this.userId
      }).then(res => {
        console.log('月度回报', res)
        this.list_monthNetWorthDistributed = res.body
      })
    },
    // 月度回报 列表
    getMonthNetWorthDetial(groupId) {
      this.getMonthNetWorthDetial_loading = true
      groupDetail({
        groupId,
        userId: this.userId,
        ...this.monthNetWorthDetial_listQuery
      }).then(res => {
        console.log('月度回报 列表', res)
        this.getMonthNetWorthDetial_loading = false
        this.list_table_getMonthNetWorthDetial = res.body.list
        this.monthNetWorthDetial_total = res.body.total
      })
    },
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.afterInvestDel-page {
  position: relative;
  .head {
    padding: 15px 15px 0;
    border: 1px solid #e1e0e0;
    font-size: 14px;
    .redFont { color: #c00; }
    .fromLine {
      display: flex;
      line-height: 24px;
      .label { width: 80px; text-align: right; }
      // .fromLine-content {}
    }
    .chunk {
      display: flex;
      > div:nth-of-type(1) { width: 28%; }
      > div:nth-of-type(2) { width: 22%; }
      > div:nth-of-type(3) { width: 22%; }
      > div:nth-of-type(4) { width: 28%; }
      .chunk-strategyType { 
        width: 100% !important; height: 100%;
        display: flex;
        > div { flex: 1; }
        > div + div {
          border-left: 1px dashed #e1e0e0;
          margin-left: 20px;
        }
        .netWorth-strategyType {
          justify-content: space-around;
        }
      }
      .history-strategyType {
        div {
          display: flex;align-items: center;
          .label {
            justify-content: flex-end;
          }
        }
        & + .history-strategyType {
          margin-left: 20px;
        }
      }
    }
    .chunk + .chunk { border-top: 1px dashed #e1e0e0; }
    .title {
      height: 84px;
      .product {
        h3 {font-size: 22px;}
        .tips {
          margin-top: 30px;
          .tip {
            border: 1px solid #3D71AE;
            color: #3D71AE;
            padding: 3px 6px;
            & + .tip { margin-left: 6px; }
          }
        }
      }
    }
    .title-center { line-height: 35px; }
    .data {
      height: 114px;
      padding: 10px 0;
      > div + div {
        border-left: 1px dashed #e1e0e0;
        margin-left: 20px;
      }
      .netWorth {
        display: flex;
        justify-content: space-between;
        .label { width: 100px; text-align: right; }
        .netWorth1 { 
          display: flex; flex-direction: column; justify-content: center; align-items: center; 
          .num { font-size: 32px; line-height: 38px; color: #c00; }
        }
        .netWorth2 { display: flex; flex-direction: column; justify-content: center; align-items: center; div { line-height: 36px; } }
      }
      .profit, .history {
        > div {line-height: 32px;}
        > div {
          display: flex; justify-content: space-around;
          span {width: 33.33%;text-align: center;}
        }
      }
      .other {
        display: flex;
        > div {display: flex; flex-direction: column; justify-content: space-around;}
      }
    }
    .operation {
      height: 80px;
      display: flex;
      align-items: center;
    }
  }
  .scrollCard {
    width: calc(100% - #{$sideBarWidth} - 80px);
    height: 80px;
    font-size: 14px;
    background: #FFF;
    z-index: 668;
    border: 1px solid #e1e0e0;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    padding-left: 15px;
    margin-left: -16px;
  }
  .from-alignCenter {
    ::v-deep .el-form{
      .el-form-item { margin-bottom: 0; }
    }
  }
  .content {
    .column {
      font-size: 18px;
      font-weight: bold;
      display: flex;
      align-items: center;
      margin-top: 30px;
      cursor: pointer;
      user-select: none;
      .el-icon { color: #4F95DD; font-weight: bold; margin-left: 6px; }
      .openChunk { transform: rotate(90deg); }
      &::before {
        display: inline-block;
        content: '';
        width: 6px;
        height: 26px;
        background: #42b983;
        margin-right: 6px;
      }
    }
  }
  .line {
    display: flex;
    .showMonth {
      display: flex;
      align-items: center;
      & + .showMonth {margin-left: 15px;}
      .round {width: 10px;height: 10px;border-radius: 50%;margin-right: 5px;}
      .round1 {background: #e16757;}
      .round2 {background: #78b2eb;}
    }
  }
  .month-chartContent {
    display: flex;
    .mChunk {width: 50%;}
  }
}
</style>

